<template>
	<view style="position:relative;border-radius: 18rpx 18rpx 0 0;overflow: hidden;">
		
		<image v-if="carInfo.image && carInfo.image.split(',')[0]"
			:src="getImageUrl((carInfo.image.split(',')[0]))" mode=""
			class="imgSty"></image>
		<div v-else class="imgSty center text-gray-500 fz26 bg-gray-300">{{$t('无载具封面')}}</div>

		<div>
			<image src="../../../static/img/statusImg.png" mode="" class="statusSty"></image>
			<p class="textStaSty" v-if="carInfo.status == 1">{{$t('空闲中')}}</p>
			<p class="textStaSty" v-if="carInfo.status == 2">{{$t('待出发')}}</p>
			<p class="textStaSty" v-if="carInfo.status == 3">{{$t('进行中')}}</p>
			<p class="textStaSty" v-if="carInfo.status == 4">{{$t('停运')}}</p>
		</div>

		<view class="textPosSty">
			<image src="../../../static/icon/iconPosition.png" mode=""></image>
			<p>{{ carInfo.posit }}</p>
		</view>

		<view class="infoSty">
			<view v-for="item in carInfo.infoList" class="between pt-22 ml-22 mr-22">
				<p class="title">{{ item.title }}</p>
				<p class="price">{{ item.num }}</p>
			</view>
			<!-- <view class="between mt-22 ml-22 mr-22">
				<p class="title">{{$t('载重')}}:</p>
				<p class="price">{{item.car_weight}}</p>
			</view>
			<view class="between mt-22 ml-22 mr-22">
				<p class="title">{{$t('线路')}}:</p>
				<p class="price">{{item.car_line}}</p>
			</view> -->
		</view>
	</view>
</template>

<script>
// import CarCard from './components/carCard.vue'
export default {
	components: {
		// CarCard
	},
	props: ['carInfo'],
	data() {
		return {
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
		}
	},
	methods: {
		getImageUrl(url = '') {
			console.log(url)
			if(url.indexOf('://') > -1) {
				return url
			} else {
				return this.IMAGE_URL + url
			}
		},
	}
}

</script>

<style lang="less">
.imgSty {
	width: 330rpx;
	height: 286rpx;
	flex-shrink: 0;
	z-index: 996;
	// background-color: aqua;
}

.statusSty {
	width: 118rpx;
	height: 57rpx;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 997;
}

.textPosSty {
	width: 100%;
	height: 36rpx;
	flex-shrink: 0;
	background: rgba(29, 29, 29, 0.44);
	position: absolute;
	top: 250rpx;
	z-index: 998;
	// margin-left: 26rpx;
	display: flex;
	align-items: center;

	image {
		width: 16rpx;
		height: 18rpx;
		flex-shrink: 0;
		margin-left: 22rpx;
		margin-top: 5rpx;
	}

	p {
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		margin-left: 8rpx;
	}
}

.textStaSty {
	position: absolute;
	top: 20rpx;
	right: 18rpx;
	color: #FFF;
	font-family: "PingFang SC";
	font-size: 20rpx;
	font-style: normal;
	font-weight: 500;
	line-height: 20rpx;
	/* 100% */
	z-index: 998;
}

.infoSty {
	width: 330rpx;
	// height: 148rpx;
	flex-shrink: 0;
	border-radius: 0 0 18rpx 18rpx;
	background: #F7F7F7;
	margin-top: -22rpx;
	padding-bottom: 22rpx;

	.title {
		color: #8C8C8C;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 20rpx;
		/* 100% */
	}

	.price {
		color: #1D1D1D;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 20rpx;
		/* 100% */
	}
}
</style>